<template>
  <a-table :row-selection="{ onChange: onSelectChange }" :loading="loading" :pagination="{
    total,
    current: pagination.page,
    pageSize: pagination.size
  }" @change="paginationChange" style="margin-top: 20px;" :columns="currentCols" :data-source="dataSource">
    <template #bodyCell="{ column, record, index }">
      <!-- 序号 -->
      <template v-if="column.dataIndex === 'index'">
        {{ index + 1 }}
      </template>
      <slot name="bodyCell" :column="column" :record="record" :index="index"></slot>
      <template v-if="column.dataIndex === 'action'">
        <a-space>
          <a-button type="primary" @click="edit(record.id)">编辑</a-button>
          <a-button danger @click="del(record.id)">删除</a-button>
        </a-space>
      </template>
    </template>
  </a-table>
</template>

<script setup>

import { computed } from 'vue'

const props = defineProps(['ids', 'page', 'total', 'loading', 'pagination', 'dataSource', 'columns'])

const emit = defineEmits(['update:ids', 'edit', 'del', 'update:page'])

const currentCols = computed(() => {
  return [{
    title: "序号",
    dataIndex: "index"
  }, ...props.columns, {
    title: "操作",
    dataIndex: "action"
  }]
})

const onSelectChange = (ids) => {
  emit('update:ids', ids)
}


const edit = (id) => {
  emit('edit', id)
}

const del = (id) => {
  emit('del', id)
}

const paginationChange = (pagination) => {
  emit('update:page', pagination.current)
}
</script>